<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml"
	xmlns:s="http://sduept.security.el/func">
	<ui:define name="head">
		<link rel="stylesheet"
			href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<style>
			.ui-treetable-scrollable-header-box {
			    margin-left: 0px;
			    margin-right: 15px !important;
			}
		</style>
	</ui:define>
	<ui:define name="content">
		<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
			<p:commandButton value="是" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="否" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		</p:confirmDialog>
		<div id="headDiv" class="box box-solid with-border">
			<h:form id="headForm">
				<p:growl id="msgs" showDetail="true" />
				<div class="box-header" id="queryDiv">
					<p:autoComplete id="expertSearch" dropdown="true" placeholder="专家首字母查询" scrollHeight="400"
						value="#{expertController.searchExpert}" style="margin-right:10px"
						completeMethod="#{expertController.completeExpert}"
						var="expert" itemLabel="#{expert.name}" itemValue="#{expert.id}" />
					<p:commandButton value="查询" icon="ui-icon-search" update=":form:dataTb" style="margin-right:10px" 
						actionListener="#{expertController.search}" oncomplete="getTableScrollHeight();" />
					<p:commandButton value="重置" icon="ui-icon-refresh" actionListener="#{expertController.reset}"
						update=":form:dataTb headForm:expertSearch" style="margin-left:5px;" oncomplete="getTableScrollHeight();" />
				</div>
				<div id="toolbarDiv">
					<p:toolbar id="toolbar">
						<f:facet name="left">
							<p:commandButton value="新增专家" update=":editForm:tree  :editForm:treeDialog" icon="ui-icon-plus"
								oncomplete="PF('treeDialog').show()" 
								 actionListener="#{expertController.addExpert}"
								rendered="#{s:hasPermission(session,'dwfxpg_sbyhgl_zjk_xzzj')}" />
							<p:commandButton value="编辑" update=":editForm:updatePanel " icon="ui-icon-pencil"
								oncomplete="PF('updateDlg').show()" 
								disabled="#{expertController.selected == null}"
								rendered="#{s:hasPermission(session,'dwfxpg_sbyhgl_zjk_bj')}" />
							<p:commandButton value="删除" icon="ui-icon-trash" update=":form:dataTb toolbar msgs"
								actionListener="#{expertController.alertMessage}"
								disabled="#{expertController.selected == null}" oncomplete="PF('cd').show()" 
								rendered="#{s:hasPermission(session,'dwfxpg_sbyhgl_zjk_sc')}">
							</p:commandButton>
							<p:confirmDialog message="#{expertController.alertMessage}" 
								header="提示" severity="alert" widgetVar="cd" responsive="true" >
								<p:commandButton value="确定" actionListener="#{expertController.delete}" 
									update=":form:dataTb toolbar msgs headForm:expertSearch" oncomplete="afterDelete()"/>
								<p:commandButton value="取消" onclick="PF('cd').hide();" type="button" />
							 </p:confirmDialog>
						</f:facet>
					</p:toolbar>
				</div>
			</h:form>
		</div>
		<div class="box box-solid with-border">
			<h:form id="form">
				<p:treeTable id="dataTb" widgetVar="dataTb" scrollable="true" scrollHeight="650"
					value="#{expertController.treeTableRoot}" selectionMode="single"
					selection="#{expertController.orgSelectedNode}" var="fun" >
					<p:ajax event="select"  update=":headForm:toolbar " listener="#{expertController.onTreeTableNodeSelect}" />
					<p:ajax event="unselect"  update=":headForm:toolbar" listener="#{expertControllerr.onNodeUnSelect}" />
					<p:column headerText="名称">
						<h:outputText value="#{fun.name}" />
					</p:column>
					<p:column headerText="用户名">
						<h:outputText value="#{fun.code}" />
					</p:column>
					<p:column headerText="地址">
						<h:outputText value="#{fun.address}" />
					</p:column>
					<p:column headerText="电话">
						<h:outputText value="#{fun.telephone}" />
					</p:column>
					<p:column headerText="介绍">
						<h:outputText value="#{fun.introduce}" style="white-space:pre-wrap;" escape="false"/>
					</p:column>
					<p:column headerText="职务">
						<h:outputText value="#{fun.position}" />
					</p:column>
				</p:treeTable>
			</h:form>
			<h:form id="editForm">
		    	<p:dialog id="updateDlg" widgetVar="updateDlg" header="编辑" modal="true" width="600" height="550">
		    		<p:toolbar>
		    			<f:facet name="left">
		    				<p:commandButton value="保存" icon="fa fa-floppy-o" oncomplete="afterEdit();"
		    					actionListener="#{expertController.updateExpert}" update=":form:dataTb :headForm:msgs" />
							<p:commandButton value="取消" icon="ui-icon-cancel" oncomplete="PF('updateDlg').hide()" />
						</f:facet>
					</p:toolbar>
					<p:outputPanel id="updatePanel" style="width:100%;">
						<p:panelGrid style="width:100%;" rendered="#{not empty expertController.selected}">
							<p:row>
								<p:column>
									<p:outputLabel value="用户名"  />
								</p:column>
								<p:column>
									<p:inputText style="width:100%;" disabled="true" value="#{expertController.selected.code}" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<p:outputLabel value="姓名" />
								</p:column>
								<p:column>
									<p:inputText style="width:100%;" value="#{expertController.selected.name}" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<p:outputLabel value="电话" />
								</p:column>
								<p:column>
									<p:inputText style="width:100%;" value="#{expertController.selected.telephone}" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<p:outputLabel value="地址" />
								</p:column>
								<p:column>
									<p:inputText style="width:100%;"
										value="#{expertController.selected.address}" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<p:outputLabel value="职务" />
								</p:column>
								<p:column>
									<p:inputText style="width:100%;"
										value="#{expertController.selected.position}" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<p:outputLabel value="所属组织" />
								</p:column>
								<p:column>
									<p:inputText style="width:100%;" value="#{expertController.selected.deptName}" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<p:outputLabel value="介绍" />
								</p:column>
								<p:column>
									<h:inputTextarea style="width:100%;" 
										value="#{expertController.selected.introduce}" />
								</p:column>
							</p:row>
						</p:panelGrid>
					</p:outputPanel>
				</p:dialog>
				<p:dialog id ="treeDialog" widgetVar="treeDialog" width="600" height="650" modal="true"  header="新增专家" >
					<p:toolbar id="toolbar">
						<f:facet name="left">
							<p:autoComplete placeholder="输入人员首字母可查" id="orgPerson" size="18"
								value="#{expertController.personName}" completeMethod="#{expertController.completePersons}"
								scrollHeight="400" style="float:left;margin-top:5px;" dropdown="true" >
								<p:ajax event="itemSelect" update=":editForm:tree :editForm:toolbar" listener="#{expertController.autoCompleteOrgTree}" />
							</p:autoComplete>
							<p:commandButton icon="fa fa-refresh" style="margin-left:5px;margin-top:5px;" value="重置"
								actionListener="#{expertController.refresh}" update=":editForm:tree :editForm:toolbar" />
							<p:commandButton style="margin-left:5px;margin-top:5px;" value="继续选择"
								update=":editForm:tree :editForm:toolbar" actionListener="#{expertController.addChoice}"
								rendered="#{expertController.choiceStatus}" />
						</f:facet>
						<f:facet name="right">
							<p:commandButton value="设为专家" style="margin-right:10px;margin-top:5px;" id="okBtn"
								actionListener="#{expertController.addExperts}" oncomplete="afterAdd();" 
								update=":form:dataTb :headForm:msgs"
						     	disabled="#{expertController.checkboxPersons.size() == 0}" />
						</f:facet>
					</p:toolbar>
					<p:tree value="#{expertController.root}" var="node" id="tree" style="border:0" dynamic="true" 
						selectionMode="checkbox" animate="true" >
						<p:ajax event="expand" update="tree" listener="#{expertController.onNodeExpand}" />	
						<p:ajax event="select" listener="#{expertController.onNodeSelect}" update=":editForm:toolbar "/>
						<p:ajax event="unselect" listener="#{expertController.onNodeUnSelect}" update=":editForm:toolbar" />
						<p:treeNode type="dept" icon="fa fa-home">
							<h:outputText value="#{node}" />
						</p:treeNode>
						<p:treeNode type="personnel" icon="fa fa-user">
							<h:outputText value="#{node}" />
						</p:treeNode>
					</p:tree>
				</p:dialog>
			</h:form>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/datatables/jquery.dataTables.js"></script>
		<script src="/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="/resources/js/tables/mytable.js"></script>
		<script src="/resources/js/tables/singleScrollTreeTable.js"></script>
		<script>
			function afterDelete() {
				PF('cd').hide();
				getTableScrollHeight();
			}
			
			function afterEdit() {
				PF('updateDlg').hide();
				getTableScrollHeight();
			}
			function afterAdd() {
				PF('treeDialog').hide();
				getTableScrollHeight();
			}
		</script>
	</ui:define>
</ui:composition>
